@import '../../../../styles/base.scss';

.pointX {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 18px;
  background-color: $textColor;
  transform: translate(-50%, 0);
}

.pointY {
  position: absolute;
  top: 50%;
  height: 2px;
  width: 18px;
  background-color: $textColor;
  transform: translate(0, -50%);
}

.clockLineBase {
  position: absolute;
  transform-origin: bottom;
  background-color: $textColor;
  bottom: 0;
}

.card {
  height: $asideWidth;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .dial {
    border: 2px solid $textColor;
    width: $asideWidth - 2 * $space;
    height: $asideWidth - 2 * $space;
    border-radius: 50%;
    // box-shadow: 0 0 24px #000 inset;
    background-color: $themeColor1;
    position: absolute;

    .zero {
      @extend .pointX;
      top: 0;
    }
    .six {
      @extend .pointX;
      bottom: 0;
    }
    .three {
      @extend .pointY;
      right: 0;
    }
    .nine {
      @extend .pointY;
      left: 0;
    }
  }

  .container {
    position: relative;

    .dot {
      position: absolute;
      width: 12px;
      height: 12px;
      top: -6px;
      left: -6px;
      border-radius: 50%;
      z-index: 4;
      background-color: $hoverColor;
    }

    .clockMinuteLine {
      @extend .clockLineBase;
      width: 4px;
      height: 90px;
      border-radius: 2px;
      left: -2px;
    }

    .clockHourLine {
      @extend .clockLineBase;
      width: 6px;
      height: 60px;
      border-radius: 3px;
      left: -3px;
    }

    .clockSecondLine {
      @extend .clockLineBase;
      background-color: $hoverColor;
      width: 2px;
      height: 90px;
      border-radius: 1px;
      left: -1px;
    }
  }
}
